<template>
	<view>
		<view class="header-box">
			<image class="avatar" :src="image" mode="aspectFill" @click.stop="updateImage"></image>
			<uni-icons type="plus-filled" size="30" color="orange" style="margin-left: -50rpx;margin-bottom: -110rpx;z-index: 1;" @click="updateImage"></uni-icons>
			<view class="r">
				<view class="uid">微信号: {{ username }}</view>
				<view class="nick" style="font-size: 20rpx;padding-top: 10rpx;letter-spacing: 1rpx;">昵称: {{ nick }}
					<u-button size="mini" type="warning" style="height: 40rpx;font-size: 20rpx;width: 146rpx;margin-left: 0rpx;margin-top: 4rpx;" @click.native.stop="toNick">更新昵称</u-button>
				</view>
			</view>
		</view>
		<view class="person-info">
			<u-divider></u-divider>
			<u-cell-group :border="false">
				<u-cell titleStyle="font-size:30rpx;color:#3D3D3D;" title="我的主页"  :border="false"  arrow-direction="right" :isLink="true"  @click="toHomePage"><text slot="value"
						class="u-slot-value"></text></u-cell>
				<u-cell titleStyle="font-size:30rpx;color:#3D3D3D" title="收藏" :border="false" :isLink="true" arrow-direction="right" url="/pages/me/order"></u-cell>	
				<u-cell titleStyle="font-size:30rpx;color:#3D3D3D" title="朋友圈" :border="false" :isLink="true" arrow-direction="right" url="/pages/me/asOrder/asOrder"></u-cell>				
				<u-cell titleStyle="font-size:30rpx;color:#3D3D3D" title="收货地址" :border="false" :isLink="true" arrow-direction="right" url="/pages/me/myAddress"></u-cell>	
				<u-cell titleStyle="font-size:30rpx;color:#3D3D3D" title="设置" :border="false" :isLink="true" arrow-direction="right" url="/pages/me/boxLottery"></u-cell>			
			</u-cell-group>
		</view>
		<view style="padding:10% 20% 0 20%;">
			<u-button type="primary" color='#FA5151' text="退出登录" @click="loginOut"></u-button>
		</view>
		
	</view>
</template>

<script>
	import request from '@/common/request.js';
	export default {
		data() {
			return {
				image: "",
				username: "",
				nick: "",
				appInstance: undefined, //app实例
			}
		},
		created() {
			this.currentUserInfo();
		},
		onLoad() {
			this.appInstance = getApp();
		},
		methods: {
			currentUserInfo() {
				let currentUser = uni.getStorageSync('currentUser');
				if(currentUser) {
					this.image = currentUser.face
					this.username = currentUser.username
					this.nick = currentUser.username
				}
			},
			loginOut() {
				let opts = {
					url: '/business2/user/logout',
					method: 'post'
				};
				request.httpTokenRequest(opts, {}).then(resp => {
					if (resp.data.code == 200) {
						uni.showToast({ title: '成功退出登录!', icon: 'none' });
						//重置记录
						uni.removeStorageSync('token')
						uni.removeStorageSync('currentUser')
						this.appInstance.globalData.wsBaseUrl = ''
						this.appInstance.globalData.webSocket.close()
						this.clearTimeOutJobs()
						this.appInstance.globalData.wsOpenStatus = false
						this.appInstance.globalData.appHide = true
						uni.reLaunch({
							url: '/tn_components/login/login',
						});
					} else {
						uni.showToast({ title: '退出登录失败，请稍后再试', icon: 'none' });
					}
				})
			},
			clearTimeOutJobs() {
				//将之前心跳包的heartbeatTimeOutTask清除掉
				if(this.appInstance.globalData.heartbeatTimeOutTasks.length > 0) {
					this.appInstance.globalData.heartbeatTimeOutTasks.forEach(item => {
						clearTimeout(item);
					})
					this.appInstance.globalData.heartbeatTimeOutTasks = []
				}
			},
		}
	}
</script>

<style lang="scss">
	.text-image-menu-icon {
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}
	.u-slot-value{
		font-size:30rpx;
		color:#3D3D3D
	}
	.header-box{
		display: flex;
		align-items: center;
		padding: 32rpx;
		padding-bottom: 60rpx;
		color: #333;
		
		.avatar{
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
		}
		.r{
			margin-left: 32rpx;
			font-size: 30rpx;
		}
		.btn{
			margin-left: auto;
			margin-right: 30rpx;
		}
	}
	.asset{
		display: flex;
		align-items: center;
		//width: 100vw;
		padding-top: 20rpx;
		padding-bottom: 40rpx;
		.item {
			flex: 1;
			display: flex;
			flex-direction: column;
			text-align: center;
			font-size: 24rpx;
			line-height: 20px;
			color: #666;
		}
	}
	.person-info{
		padding:0 20rpx;
	}
	
	
	.uni-share-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 40px;
	}
	.uni-share-title-text {
		font-size: 14px;
		color: #666;
	}
	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 10px;
	}
	
	.uni-share-content-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		width: 360px;
	}
	
	.uni-share-content-item {
		width: 90px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		padding: 10px 0;
		align-items: center;
	}
	
	.uni-share-content-item:active {
		background-color: #f5f5f5;
	}
	
	.uni-share-image {
		width: 30px;
		height: 30px;
	}
	
	.uni-share-text {
		margin-top: 10px;
		font-size: 14px;
		color: #3B4144;
	}
	
	.uni-share-button-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 10px 15px;
	}
	
	.uni-share-button {
		flex: 1;
		border-radius: 50px;
		color: #666;
		font-size: 16px;
	}
	
	.uni-share-button::after {
		border-radius: 50px;
	}
	
	.code {
			//animation: twinkle 2s infinite alternate;
		}
	
	.pop {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		background-color: #fff;
		border-radius: 16rpx;
		height: 400rpx;
		z-index: 99;
		width: 640rpx;
		padding: 4rpx 0;
	}
	
	.title {
		text-align: center;
		font-size: 34rpx;
		font-weight: 500;
		margin-top: 10rpx;
	}
	
	.tip-img {
		// margin: 0 auto;
		width: 100%;
		height: 160rpx;
		margin-top: 10rpx;
		text-align: center;
	}
	// .tip-img image {
	// 	width: 100%;
	// 	height: 100%;
	// }
	.tip-info {
		// padding: 0 30rpx;
		font-size: 30rpx;
		color: #666;
		// margin-top: 2rpx;
		margin-bottom: 20rpx;
		text-align: center;
	}
	.sure {
		width: 100%;
		border-top: 1rpx solid #d1d1d1;
		// height: 20rpx;
		text-align: center;
		line-height: 70rpx;
		color: #02A53C;
		font-size: 34rpx;
		font-weight: 500;
	}
	
	// @keyframes twinkle {
	// 	0% {
	// 		opacity: .0.8;
	// 	}

	// 	100% {
	// 		opacity: 0;
	// 	}
	// }
</style>